<ion-header>
  <ion-navbar>
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <button ion-button secondary menuToggle>Toggle Menu</button>
    <ion-item-group>
        <ion-item-divider>当日计划</ion-item-divider>
        <ion-item>
            <ion-toggle checked="false"></ion-toggle>
            <ion-label>
                每天跑一万米
            </ion-label>
        </ion-item>
        <ion-item>每天跑一万米</ion-item>
        <ion-item>每天跑一万米</ion-item>
        <ion-item>
            <ion-label>Start Time</ion-label>
            <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label stacked>Username</ion-label>
            <ion-input type="text"></ion-input>
          </ion-item>
        
          <ion-item>
            <ion-label stacked>Password</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>
        <ion-item>
            <ion-avatar item-start>
              <img src="../assets/imgs/logo.png">
            </ion-avatar>
            <h2>Finn</h2>
            <h3>I'm a big deal</h3>
            <p>Listen, I've had a pretty messed up day...</p>
          </ion-item>
      
          <ion-item>
            <ion-avatar item-start>
              <img src="../assets/imgs/logo.png">
            </ion-avatar>
            <h2>Han</h2>
            <h3>Look, kid...</h3>
            <p>I've got enough on my plate as it is, and I...</p>
          </ion-item>
          <a ion-item (click)="openModal()">
              Gollum
          </a>
          <ion-item>
              <ion-range min="-200" max="200" pin="true" [(ngModel)]="contrast" color="secondary">
                <ion-icon range-left small name="contrast"></ion-icon>
                <ion-icon range-right name="contrast"></ion-icon>
              </ion-range>
          </ion-item>
    </ion-item-group>
    <ion-item-group radio-group>
        <ion-item-divider>
          Language
        </ion-item-divider>
      
        <ion-item>
          <ion-label>Go</ion-label>
          <ion-radio checked="true" value="go"></ion-radio>
        </ion-item>
      
        <ion-item>
          <ion-label>Rust</ion-label>
          <ion-radio value="rust"></ion-radio>
        </ion-item>
      
        <ion-item>
          <ion-label>Python</ion-label>
          <ion-radio value="python" disabled="true"></ion-radio>
        </ion-item>
    </ion-item-group>
    <ion-content padding>
        <button ion-button block (click)="presentLoading()">Show Loading</button>
        <button ion-button block (click)="opendetail()">Detail</button>
        <button ion-button block (click)="openfeedback()">Feedback</button>
    </ion-content>
    <ion-card>
          <ion-card-header>
              Welcome to Ionic!
          </ion-card-header>
        
          <ion-card-content>
              This starter project comes with simple tabs-based layout for apps
              that are going to primarily use a Tabbed UI.

          </ion-card-content>
        
    </ion-card>
    <ion-card>
        
          <img src="../assets/imgs/timg.jpeg">
        
          <ion-item>
            <ion-icon name="football" item-start large></ion-icon>
            <h2>Museum of Football</h2>
            <p>11 N. Way St, Madison, WI 53703</p>
          </ion-item>
        
          <ion-item>
            <ion-icon name="wine" item-left large ></ion-icon>
            <h2>Institute of Fine Cocktails</h2>
            <p>14 S. Hop Avenue, Madison, WI 53703</p>
          </ion-item>
        
          <ion-item>
            <span item-left>18 min</span>
            <span item-left>(2.6 mi)</span>
            <button ion-button icon-left clear item-end>
              <ion-icon name="navigate"></ion-icon>
              Start
            </button>
          </ion-item>
        
        </ion-card>
  
</ion-content>
